<template>
  <div v-if="drawerType === 'EDIT'" class="add-equip-detail">
    <px-scrollbar class="add-equip-content">
      <div style="margin-top: 16px">
        <px-button type="primary" icon="back" @click="backMainPage"> 返回 </px-button>
      </div>
      <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
      <EqpBaseInfoEdit
        v-if="activeName === 'eqp'"
        :eqpDetailData="eqpDetailData"
        :activeName="activeName"
        @queryTable="emits('queryTable')"
        @backMainPage="emits('backMainPage')"
      />
      <equipStats v-if="activeName === 'stats'" type="edit" :eqpId="props.eqpId" @backMainPage="emits('backMainPage')" />
      <EqpPID
        v-if="activeName === 'pid'"
        :eqpDetailData="eqpDetailData"
        type="edit"
        :activeName="activeName"
        @backMainPage="emits('backMainPage')"
        @getEqpDetails="getEqpDetails"
      />
      <EquipGuide
        v-if="activeName === 'guide'"
        type="edit"
        :activeName="activeName"
        :parentId="parentId"
        :eqpDetailData="eqpDetailData"
        @backMainPage="emits('backMainPage')"
        @getEqpDetails="getEqpDetails"
      />
      <EquipSOP
        v-if="activeName === 'sop'"
        type="edit"
        :activeName="activeName"
        :parentId="parentId"
        :eqpDetailData="eqpDetailData"
        @backMainPage="emits('backMainPage')"
        @getEqpDetails="getEqpDetails"
      />
      <EquipImg
        v-if="activeName === 'img'"
        type="edit"
        :activeName="activeName"
        :parentId="parentId"
        :eqpDetailData="eqpDetailData"
        @backMainPage="emits('backMainPage')"
        @getEqpDetails="getEqpDetails"
      />
      <EquipInstrument
        v-if="activeName === 'instrument'"
        type="edit"
        :activeName="activeName"
        :eqpDetailData="eqpDetailData"
        @backMainPage="emits('backMainPage')"
      />
    </px-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { queryEqpById } from "@/api/equip/archive";
import CustomTabs from "@/components/Tabs/index.vue";
import { reactive, toRefs, watchEffect } from "vue";
import EqpBaseInfoEdit from "./EqpBaseInfoEdit.vue";
import EqpPID from "./EqpPID.vue";
import EquipGuide from "./EquipGuide.vue";
import EquipImg from "./EquipImg.vue";
import EquipInstrument from "./EquipInstrument.vue";
import EquipSOP from "./EquipSOP.vue";
import equipStats from "./equipStats.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);

// 父级传过来的值
const props = defineProps(["drawerType", "shareData", "eqpId"]);

const state = reactive<any>({
  eqpDetailData: [],
  activeName: "eqp",
  tabList: [
    {
      name: "eqp",
      label: "设备信息"
    },
    {
      name: "stats",
      label: "设备参数"
    },
    {
      name: "pid",
      label: "设备PID图"
    },
    {
      name: "guide",
      label: "设备手册"
    },
    {
      name: "sop",
      label: "故障处理SOP"
    },
    {
      name: "img",
      label: "设备图纸"
    },
    {
      name: "instrument",
      label: "附属设备/附件"
    }
  ],
  parentId: "" // 上传文件的文件夹id
});
const { activeName, eqpDetailData, tabList, parentId } = toRefs(state);

const handelTabSelected = selectName => {
  activeName.value = selectName;
};

const getEqpDetails = async () => {
  const data = await queryEqpById({ eqpId: props.eqpId });
  const { pictureList, categoryName } = data;
  eqpDetailData.value = { ...data, pictureList: pictureList || [], categoryName: categoryName || "无" };
};

watchEffect(async () => {
  if (props.drawerType === "EDIT") {
    handelTabSelected("eqp");
    getEqpDetails();
    // const filePathList = await queryDictData({ typeCode: "EQP_FILE_PATH_ID" });
    // const filterItem = filePathList.filter(item => item.name === `${eqpDetailData.value.className}_EXT`);
    // parentId.value = filterItem[0].value;
  }
});

// 返回主页面
const backMainPage = () => {
  activeName.value = "eqp";
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-detail.scss");

.add-equip-detail .add-equip-content {
  height: calc(100vh - 130px);
  padding: 0 24px 24px;
}
</style>
